<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2020 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div *ngIf="!loadingData; else loadingIcon">
    <div class="right">
        <button class="btn btn-primary" name="save" [disabled]="!sharedData?.currentVersion?.editable"
                (click)="save()">Save
        </button>
    </div>
    <div class="form-group">
        <label class="control-label" for="constraints">Constraints</label>
        <p>
        <div *ngFor="let constraintClause of component.constraints" id="constraints" class="constraintField">
                <span><b>{{constraintClause.key}}</b>:
                    <span *ngIf="constraintClause.value != null">{{constraintClause.value}}</span>
                    <span *ngIf="constraintClause.list != null">{{constraintClause.list.toString()}}</span>
                    <button class="rightbutton btn btn-danger btn-xs" (click)="removeConstraint(constraintClause)">Delete</button>
                </span>
        </div>
        <p *ngIf="component.constraints === undefined || component.constraints.length === 0">
            This datatype does not define constraints
        </p>
    </div>
    <div class="form-group">
        <label class="control-label" for="constraintKey">Add new constraint</label><br>
        <select #selectedConstraintKey id="constraintKey">
            <option *ngFor="let item of valid_constraint_keys">{{ item }}</option>
        </select>
        <div *ngIf="list_constraint_keys.includes(selectedConstraintKey.value)">
            Please separate items by using ','
        </div>
        <div *ngIf="range_constraint_keys.includes(selectedConstraintKey.value)">
            Only two items are allowed.
        </div>
        <input #constraintValue id="constraintVal" class="form-control" type="text"/>
        <button type="button" class="btn btn-default"
                (click)="addConstraint(selectedConstraintKey.value, constraintValue.value)">
            Add Constraint
        </button>
    </div>
</div>
<ng-template #loadingIcon>
    <div>
        <winery-loader></winery-loader>
    </div>
</ng-template>
